<template>
	<view class="u-rela">
		<view class="">
			<u-image src='https://www.sqkjkj.vip/wxImg/join/img6.png' width='750rpx' height='100vh'></u-image>
		</view>
		<view class="u-abso u-t-0 u-w-750">
			<view class="u-p-t-100 u-abso u-t-0" style="padding: 0 30rpx;">
				<u-icon name='arrow-leftward' color='#ffffff' @click='backs'></u-icon>
			</view>

		</view>
		<view class="u-abso u-t-200 u-w-750">
			<view class="one u-auto">
				<u-image src='https://www.sqkjkj.vip/wxImg/join/img7.png' width='698rpx' height='567rpx'></u-image>
				<view class="u-abso u-t-200 u-w-698 u-auto">
					<view class="u-m-t-20 u-w-320 u-h-66 u-l-h-66 u-font-28 u-text-center u-b-r-32 u-auto"
						style="border: 1px solid #F8D7AD; color: #FFDBAC;">合作共赢 共创未来</view>
					<view class="u-text-center u-p-t-30" style="color: #FFE1B6;" v-if="agent_level==1">申请省级代理</view>
					<view class="u-text-center u-p-t-30" style="color: #FFE1B6;" v-if="agent_level==2">申请市级代理</view>
					<view class="u-text-center u-p-t-30" style="color: #FFE1B6;" v-if="agent_level==3">申请县/区级代理</view>
					<view class="u-text-center u-p-t-30" style="color: #FFE1B6;" v-if="agent_level==4">申请合伙人</view>
					<view class="u-m-t-30 u-m-l-80" style="color: #FBE9CA;">位置*</view>
					<view class="u-w-580 u-m-t-20 u-auto u-h-64 u-flex u-row-between"
						style="border: 1rpx solid #3B4C80;padding: 0 20rpx;" @click="show=true">
						<view class="cl_FFF">{{text}}</view>
						<u-image src='https://www.sqkjkj.vip/wxImg/join/img8.png' width='20rpx' height='20rpx'></u-image>
					</view>

					<view class="u-w-588 u-auto u-h-100 u-l-h-100 u-m-t-50 u-l-s-10  u-text-center u-b-r-50 u-weight u-font-46"
						style="background:linear-gradient(0deg, #E3B781, #FFFFEC);color: #1E2961;" @click="save">提交
					</view>

				</view>

				<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="list" range-key="area_name"
					@confirm='confirm' @cancel="cancel"></u-picker>
				<u-picker mode="selector" v-model="shows" :default-selector="[0]" :range="array" range-key="area_name"
					@confirm='confirm1' @cancel="cancel"></u-picker>
				<u-picker mode="selector" v-model="shows1" :default-selector="[0]" :range="array" range-key="area_name"
					@confirm='confirm2' @cancel="cancel"></u-picker>
			</view>
		</view>
		<!-- 支付弹窗 -->
		<u-popup v-model="show7" mode="bottom" @close="close7">
			<view class="bg_FFFFFF u-b-r-12">
				<view @click="pays='deposit'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="u-flex">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/card.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 ">钱包支付</view>
						</view>
						<view class="u-m-l-30 cl_898989FF u-font-24">可用<text class="cl_FB473CFF">￥{{yu.user_wallet || 0}}</text>
						</view>
					</view>
					<view class="u-flex">
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='deposit'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else>
							</u-image>
						</view>
					</view>

				</view>

				<view @click="openEpayDialog" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="">
						<view class=" u-flex">
							<u-image src="http://xcx.itcwc.com/wxImg/5dcf4786109a5.png" mode="aspectFill" width="50rpx" height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28">易支付</view>
						</view>

					</view>
					<view class="u-flex">
						<!-- <view class="u-m-r-20 cl_FB473CFF">-￥{{userinfo.goods_amount}}</view> -->
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays == 'epay'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else>
							</u-image>
						</view>
					</view>
				</view>

				<!-- #ifdef MP-WEIXIN || APP -->
				<view @click="pays='wechat'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 ">微信支付 </view>
						</view>

					</view>
					<view class="u-flex">
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='wechat'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else>
							</u-image>
						</view>
					</view>
				</view>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS || MP-ALIPAY -->
				<view v-if="!isWechatMP" @click="pays='alipay'" class="u-flex u-row-between u-p-30"
					style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="">
						<view class=" u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="50rpx"
								height='50rpx'>
							</u-image>
							<view class="u-m-l-30 u-font-28 ">支付宝支付</view>
						</view>
					</view>
					<view class="u-flex">
						<view class="">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='alipay'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else>
							</u-image>
						</view>
					</view>
				</view>
				<!-- #endif -->
			</view>
			<!-- 立即支付 -->
			<view class=" u-h-120 u-w-750 bg_FFFFFF">
				<view @click="true_pays" class="u-w-640 u-auto u-h-98 bl2C_3F u-l-h-98 u-text-center u-b-r-20 u-auto"
					style="letter-spacing: 4rpx;color: #ffffff;">立即支付 ￥{{payParams.price}}</view>
			</view>
		</u-popup>
		<u-popup v-model="show8" mode='center'>
			<view class="u-p-30 u-h-200">
				<u-message-input v-if="show8" :focus="true" :maxlength='6' @change="change" @finish="finish"></u-message-input>
			</view>
		</u-popup>

		<!-- 易支付选择弹窗 -->
		<u-popup v-model="showEpayDialog" mode="center" width="80%" border-radius="10">
			<view class="epay-dialog">
				<view class="epay-dialog-title">请选择支付方式</view>
				<view class="epay-dialog-content">
					<view class="epay-payment-option" @click="selectEpayMethod('wxpay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayMethod === 'wxpay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">微信支付</view>
					</view>
					<view v-if="!isWechatMP" class="epay-payment-option" @click="selectEpayMethod('alipay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayMethod === 'alipay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">支付宝支付</view>
					</view>
				</view>
				<view class="epay-dialog-footer">
					<view class="epay-dialog-btn cancel-btn" @click="showEpayDialog = false">取消</view>
					<view class="epay-dialog-btn confirm-btn" @click="confirmEpayMethod">确定</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: '',
			text: '选择区域',
			order_id: '',
			list: [],
			show: false,
			shows: false,
			shows1: false,
			array: [],
			agent_level: '',
			pays: '',
			show7: false,
			show8: false,
			payParams: '',
			yu: '',
			isWechatMP: false,
			deviceType: 'web',
			showEpayDialog: false,
			epayMethod: 'wxpay',
		}
	},
	onLoad(obj) {
		this.type = obj.num
		this.agent_level = (obj.num) * 1
		if (this.type == 4) {
			this.type = 3
		}
		this.massage()
		this.detectDeviceType()
	},
	onShow() {
		this.yu = uni.getStorageSync("userinfo")
	},
	onHide() {
		this.cancel_apply()
	},
	onUnload() {
		this.cancel_apply()
	},
	methods: {
		cancel_apply() {
			if (this.payParams.target_id) {
				this.$api.cancel_apply({
					agent_id: this.payParams.target_id
				}, res => {
					this.list = res.data.data
				})
			}
		},
		massage() {
			this.$api.apply_join({
				level: this.type
			}, res => {
				this.list = res.data.data
			})
		},
		confirm(e) {
			this.text = ''
			if (this.type == 1) {
				this.text = this.list[e[0]].area_name
				this.order_id = this.list[e[0]].id
			} else if (this.type == 2 || this.type == 3 || this.type == 4) {
				this.shows = true
				this.text = this.list[e[0]].area_name
				this.array = this.list[e[0]].child
			}
		},
		confirm1(e) {
			if (this.type == 2) {
				this.text = this.text + '' + this.array[e[0]].area_name
				this.order_id = this.array[e[0]].id
			} else if (this.type == 3 || this.type == 4) {
				this.text = this.text + '' + this.array[e[0]].area_name
				this.shows1 = true
				this.array = this.array[e[0]].child
			}
		},
		confirm2(e) {
			this.text = this.text + '' + this.array[e[0]].area_name
			this.order_id = this.array[e[0]].id
		},
		cancel() {
			this.text = '选择区域'
			this.order_id = ''
			this.show = false
			this.shows = false
			this.shows1 = false
			this.array = []
		},
		// 点击提交
		save() {
			if (this.agent_level == 4) {
				this.$api.apply({
					agent_level: this.agent_level,
					area_id: ''
				}, res => {
					if (res.data.code == 1) {
						this.show7 = true
						this.payParams = res.data.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
			} else {
				this.$api.apply({
					agent_level: this.agent_level,
					area_id: this.order_id
				}, res => {
					if (res.data.code == 1) {
						this.show7 = true
						this.payParams = res.data.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
			}

		},
		// 点击立即支付
		true_pays() {
			if (this.pays == 'deposit') {
				// if (uni.getStorageSync('userinfo').have_trade_pwd == 0) {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请先设置余额支付密码',
				// 		success: (res)=> {
				// 			if (res.confirm) {
				// 				this.$u.route('/pages/changePayPassword/changePayPassword')
				// 			} else {

				// 			}
				// 		}
				// 	})
				// 	return
				// }
				// this.show8 = true
				this.pay()
			} else if (this.pays == 'epay') {
				// 易支付
				let params = {
					target_id: this.payParams.target_id,
					target_type: this.payParams.target_type,
					pay_type: this.pays,
					type: this.epayMethod, // 使用选择的支付方式
					method: this.deviceType, // 使用检测到的设备类型
				}
				this.$com.easyPay(params, this.pays);
			} else {
				// #ifdef APP-PLUS
				this.$com.wxPay({
					target_id: this.payParams.target_id,
					target_type: this.payParams.target_type,
					pay_type: this.pays,
					client: "APP",
					trade_pwd: ''
				}, this.pays).then(ok => {
					this.$refs.uToast.show({
						title: ok.data.msg,
						type: 'success',
						callback: cal => {
							this.$u.route({
								type: 'reLaunch',
								url: '/pages/my/my'
							})
						}
					})
				})
				// #endif
				// #ifdef MP-WEIXIN
				this.$com.weChatPay({
					target_id: this.payParams.target_id,
					target_type: this.payParams.target_type,
					pay_type: this.pays,
					client: "JSAPI",
					trade_pwd: ''
				}, this.pays).then(ok => {
					this.$refs.uToast.show({
						title: ok.msg,
						type: 'success',
						callback: cal => {
							this.$u.route({
								type: 'reLaunch',
								url: '/pages/my/my'
							})
						}
					})
				})
				// #endif

				// #ifdef MP-ALIPAY
				this.$com.aliPay({
					target_id: this.payParams.target_id,
					target_type: this.payParams.target_type,
					pay_type: this.pays,
					client: "JSAPI",
					trade_pwd: ''
				}, this.pays).then(ok => {
					this.$refs.uToast.show({
						title: ok.msg,
						type: 'success',
						callback: cal => {
							this.$u.route({
								type: 'reLaunch',
								url: '/pages/my/my'
							})
						}
					})
				})
				// #endif


			}
		},
		change(e) {
			console.log()
		},
		finish(e) {
			this.pay(e)
			this.shows = false
		},
		close7() {
			this.cancel_apply()
		},
		pay(obj = '') {
			uni.showLoading({
				title: '支付中',
				mask: true
			});
			this.$api.go_pay({
				target_id: this.payParams.target_id,
				target_type: this.payParams.target_type,
				pay_type: this.pays,
				client: "APP",
				trade_pwd: obj
			}, res => {
				uni.hideLoading()
				if (res.data.code == 1) {
					uni.showToast({
						icon: 'none',
						title: '申请成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}
			})
		},
		backs() {
			uni.navigateBack()
		},
		detectDeviceType() {
			// #ifdef H5
			this.deviceType = 'web' // H5环境使用web
			this.isWechatMP = false
			// #endif

			// #ifdef MP-WEIXIN
			this.deviceType = 'jsapi' // 微信小程序环境使用jsapi
			this.isWechatMP = true
			// #endif

			// #ifdef MP-ALIPAY
			this.deviceType = 'jsapi' // 支付宝小程序环境使用jsapi
			this.isWechatMP = false
			// #endif

			// #ifdef APP-PLUS
			this.deviceType = 'web' // APP环境使用app
			this.isWechatMP = false
			// #endif

			console.log('当前设备类型:', this.deviceType)
		},
		selectEpayMethod(method) {
			// 如果是微信小程序环境且尝试选择支付宝支付，则不允许
			if (this.isWechatMP && method === 'alipay') {
				return
			}
			this.epayMethod = method
		},
		confirmEpayMethod() {
			this.pays = this.epayMethod
			this.showEpayDialog = false
		},
		openEpayDialog() {
			// 在微信小程序环境中，默认选择微信支付
			if (this.isWechatMP) {
				this.epayMethod = 'wxpay'
			} else {
				// 默认选择微信支付，但允许切换
				this.epayMethod = 'wxpay'
			}
			this.pays = 'epay'
			this.showEpayDialog = true
		}
	}
}
</script>

<style scoped>
page {
	width: 750rpx;
	height: 1632rpx;
	background: url('https://www.sqkjkj.vip/wxImg/join/img6.png') no-repeat;
	background-size: 100% 100%;
}

.one {
	width: 698rpx;
	height: 567rpx;
	margin: 0 auto;
	/* background: url('https://www.sqkjkj.vip/wxImg/join/img7.png') no-repeat; */
	/* background-size: 100% 100%; */
	margin-top: 170rpx;
}

/* 易支付选择弹窗样式 */
.epay-dialog {
	background-color: #fff;
	padding: 30rpx;
}

.epay-dialog-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.epay-dialog-content {
	padding: 20rpx 0;
}

.epay-payment-option {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.radio-button {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: transparent;
}

.radio-selected {
	background-color: #3298FD;
}

.payment-icon {
	margin-right: 20rpx;
}

.payment-name {
	font-size: 28rpx;
}

.epay-dialog-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}

.epay-dialog-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
}

.confirm-btn {
	background-color: #3298FD;
	color: #fff;
}
</style>
